<template>
	<view class="head">
		<view class="img" @click="back">
			<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/back-arrow.png" mode=""></image>
		</view>
		<view class="message">
			<text>自行检测</text>
		</view>
	</view>
	<view class="body">
		<scroll-view scroll-y="true" style="height: 84vh;">
			<view class="container">
				<view class="mark">
					<view class="content">
						<view class="xiangmu">
							<view class="xiangmu-left">项目名称:</view>
							<view class="xiangmu-right">新密市某某有限公司</view>
						</view>
						<view class="xiangmu">
							<view class="xiangmu-left">报告编号:</view>
							<view class="xiangmu-right">123456789</view>
						</view>

						<view class="xiangmu">
							<view class="xiangmu-left">监测类别:</view>
							<view class="xiangmu-right">废气、废水</view>
						</view>
						<view class="xiangmu">
							<view class="xiangmu-left">受检单位:</view>
							<view class="xiangmu-right">新密市某某有限公司</view>
						</view>

						<view class="xiangmu">
							<view class="xiangmu-left">委托单位:</view>
							<view class="xiangmu-right">新密市某某有限公司</view>
						</view>

						<view class="xiangmu">
							<view class="xiangmu-left">监测机构:</view>
							<view class="xiangmu-right">河南皖仪检测技术有限公司</view>
						</view>

						<view class="xiangmu">
							<view class="xiangmu-left">检测日期:</view>
							<view class="xiangmu-right">2025-10-12</view>
						</view>
						<view class="xiangmu">
							<view class="xiangmu-left">报告日期:</view>
							<view class="xiangmu-right">2025-10-12</view>
						</view>
						<!-- 监测机构资质认定证书 -->
						<view class="pictuer">
							<view class="xx">
								监测机构资质认定证书：
							</view>
							<view class="imgs">
								<image src="" mode=""></image>
							</view>
						</view>
					</view>
				</view>


				<!-- zhou -->
				<view class="baitian">
					<view class="conten">
						<view class="head-title">
							昼间监测
						</view>


						<view class="pictuers">
							<view class="xx">
								采样人员照片：
							</view>
							<view class="imgs">
								<image src="" mode=""></image>
							</view>
						</view>

						<view class="pictuers">
							<view class="xx">
								采样人员照片：
							</view>
							<view class="imgs uu">
								<image src="" mode=""></image>
								<image src="" mode=""></image>
								<image src="" mode=""></image>
								<image src="" mode=""></image>

							</view>
						</view>

						<view class="pictuers">
							<view class="xx">
								采样过程照片：
							</view>
							<view class="imgs">
								<image src="" mode=""></image>
							</view>
						</view>



						<view class="pictuers">
							<view class="xx">
								采样过程照片：
							</view>
							<view class="imgs">
								<image src="" mode=""></image>
							</view>
						</view>



					</view>
				</view>
				<!-- yejian -->


				<view class="baitian">
					<view class="conten">
						<view class="head-title">
							夜间监测
						</view>


						<view class="pictuers">
							<view class="xx">
								采样人员照片：
							</view>
							<view class="imgs">
								<image src="" mode=""></image>
							</view>
						</view>

						<view class="pictuers">
							<view class="xx">
								采样人员照片：
							</view>
							<view class="imgs uu">
								<image src="" mode=""></image>
								<image src="" mode=""></image>
								<image src="" mode=""></image>
								<image src="" mode=""></image>

							</view>
						</view>

						<view class="pictuers">
							<view class="xx">
								采样过程照片：
							</view>
							<view class="imgs">
								<image src="" mode=""></image>
							</view>
						</view>



						<view class="pictuers">
							<view class="xx">
								采样过程照片：
							</view>
							<view class="imgs">
								<image src="" mode=""></image>
							</view>
						</view>



					</view>
				</view>

















			</view>
		</scroll-view>

	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue';

	function back() {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style lang="scss" scoped>
	.head {
		width: 750rpx;
		height: 142rpx;
		background: #0874FA;
		position: relative;
		overflow: hidden;
	}

	.img {
		width: 22rpx;
		height: 38rpx;
		position: absolute;
		top: 75rpx;
		left: 40rpx;

		image {
			width: 22rpx;
			height: 38rpx;
		}
	}

	.message {
		width: 220rpx;
		height: 34rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 34rpx;
		position: absolute;
		top: 75rpx;
		left: 270rpx;

		text {
			display: inline-block;
			width: 220rpx;
			height: 34rpx;
			text-align: center;
			line-height: 34rpx;
		}
	}

	.body {
		width: 100%;
		height: 100%;
		background-color: #f3f5f7;
	}

	.container {
		width: 750rpx;
		// height: 2010rpx;
		// background: red;
		// background-color: #FFFFFF;

		.content {
			width: 690rpx;
			// height: 300rpx;
			margin: 0 auto;
			margin-top: 10rpx;
			background-color: #FFFFFF;

			.xiangmu {
				// width: 500rpx;
				display: flex;
				justify-content: start;
				align-items: center;
				margin-bottom: 40rpx;

				.xiangmu-left {
					// width: 149rpx;
					height: 33rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 35rpx;
					color: #666666;
					line-height: 33rpx;
				}

				.xiangmu-right {
					// width: 400rpx;
					height: 35rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					font-size: 35rpx;
					color: #333333;
					line-height: 35rpx;
				}
			}
		}
	}

	.xx {
		width: 390rpx;
		height: 33rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 35rpx;
		color: #666666;
		line-height: 33rpx;

	}

	.imgs {
		width: 148rpx;
		height: 148rpx;
		background: #CCCCCC;
		margin-top: 10rpx;

		image {
			width: 148rpx;
			height: 148rpx;
		}
	}

	.pictuer {
		margin-bottom: 20rpx;
	}

	.uu {
		width: 500rpx;
		height: 148rpx;
		display: flex;
		justify-content: space-between;
		background-color: #FFFFFF;

		image {
			width: 148rpx;
			height: 148rpx;
			background-color: #CCCCCC;
		}
	}

	.world {
		width: 300rpx;
	}

	.baitian {
		width: 750rpx;
		// height: 600rpx;
		background-color: #FFFFFF;
		margin-top: 10rpx;

		.conten {
			width: 690rpx;
			// height: 300rpx;
			margin: 0 auto;
			margin-top: 10rpx;
			margin-bottom: 20rpx;
            overflow: hidden;
			// background-color: #0874FA;
			.head-title {
				width: 160rpx;
				height: 35rpx;
				font-family: Source Han Sans CN;
				font-weight: 700;
				font-size: 38rpx;
				color: #333333;
				line-height: 33rpx;
				margin-top: 30rpx;
				
			}
		}
	}

	.pictuers {
		margin-top: 20rpx;

		.xx {
			margin-bottom: 20rpx;
		}

		.uu {
			width: 650rpx;
			height: 148rpx;
			display: flex;
			justify-content: space-between;

			// background-color: #FFFFFF;
			image {
				width: 148rpx;
				height: 148rpx;
				background-color: #CCCCCC;
			}
		}
	}

	.mark {
		width: 750rpx;
		background-color: #FFFFFF;
	}
</style>